<template>
  <div class="article">
    <Header></Header>

    <div class="content">
      <div class="wrapper">
        <div class="article_content">
          <div class="title">{{ article.title }}</div>
          <div class="info">
            分类：{{ article.category ? article.category.name : "无" }} 作者：{{
    article.baseUser ? article.baseUser.realname : "匿名"
}}
            发布时间：{{ article.publishTime | fmtDate }} 阅读次数：{{
    article.readTimes
}}
          </div>
          <div class="cc" v-html="article.content">
            <!-- {{ article.content }} -->
          </div>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import { get } from "./../utils/request";
import Header from "./components/Header.vue";
import Footer from "./components/Footer.vue";
export default {
  components: { Header, Footer },
  data() {
    return {
      id: 0,
      article: null,
    };
  },
  methods: {
    loadArticle() {
      var url = "index/article/findById";
      get(url, { id: this.id }).then((resp) => {
        this.article = resp.data;
      });
    },
  },
  created() {
    this.id = this.$route.query.id;
    this.loadArticle();
  },
};
</script>

<style lang="scss">
$color1: #3d9bf0;

//什么是px,什么是em ——>都是衡量单位
//px-固定单位，指定多大，就是多大
//em，相对单位，相对于父元素的单位，网站默认的字体大小是16px = 1em，子元素想设置12px，0.75em,用em更能适应页面的调整

.article {
  .content {
    background-color: #fcfcfc;
    content: "";
    display: block;
    //表示清除哪边的浮动布局
    clear: both; //清除两边的浮动

    padding: 1em 0;

    .article_content {
      background-color: #ffffff;
      min-height: 400px;
      border-radius: 5px;

      .title,
      .info {
        text-align: center;
      }

      .title {
        font-size: 20px;
        font-weight: bold;
        color: $color1;
        line-height: 2em;
      }

      .info {
        padding: 0 0 1em;
        width: 80%;
        margin: 0 auto;
        border-bottom: 1px solid $color1;
        margin-bottom: 0.5em;
      }

      .cc {
        padding: 0 1em;
      }
    }
  }
}
</style>
